<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dynamic Forms built with JavaScript</title>
<link rel="stylesheet" href="resources/css/jqueryui/smoothness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" href="resources/css/jqueryui/demo_table.css" />
<link rel="stylesheet" href="resources/css/jqueryui/demo_page.css" />
<script src="js/jquery/jquery-1.8.3.js"></script>
<script src="js/jquery/jquery-ui-1.9.2.custom.js"></script>
<script src="js/jquery/jquery.dataTables.js"></script>
<link rel="stylesheet" href="resources/css/jqueryui/demos.css" />
<style>
	#tabs { margin-top: 0em; }
	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
	#add_tab { cursor: pointer; }
</style>
<script type="text/javascript">
	$(function() {
		$.ajax({
			type:"POST",
			async: false,
			url:"loadMenus.do",
			success: function(msg){
				for(var i = 0; i< msg.length; i++){
					var menulevel = msg[i].menulevel;
					if(menulevel == 1){
						$("#menus").append("<h3>"+msg[i].menu_name+"</h3><div id="+msg[i].menu_id+"></div>");
					}else{
						$("#"+msg[i].parent_menu_id).append("<button action='"+msg[i].menu_url+"' value='"+msg[i].menu_id+"'>"+msg[i].menu_name+"</button>");
					}
				}
			}
		});
		var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>";
		var tabs = $("#tabs").tabs();
		$("#menus").accordion();
		$("button")
	      .button()
	      .click(function( event ) {
	        addTab(this);
	      });
		$("#menus > div").each(function(index,item){
			var height = (item.children.length)*48+'px';
			//item.css({'height' : height});
			item.style.height = height;
		});
		
		
		
		function addTab(obj) {
			var label = obj.textContent;
			var value = obj.getAttribute("value");
			var	id = "tabs-" + value;
			var	li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
			var	tabSrc = obj.getAttribute("action");
			
			if($("#"+id+"").length > 0){
				tabs.tabs("select","#"+id+"");
			}else{
				tabs.find( ".ui-tabs-nav" ).append( li );
				tabs.append( "<div id='" + id + "' style='height:420px'></div>" );
				$("#"+id+"").load(tabSrc);
				tabs.tabs("refresh");
				tabs.tabs("select","#"+id+"");
			}
			
		}
		
		$( "#tabs span.ui-icon-close" ).live( "click", function() {
			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
			$( "#" + panelId ).remove();
			tabs.tabs( "refresh" );
		});
	});
</script>
<body>
	<div style="width: 1305px; height: 700px; margin: 5px auto; overflow: auto; border: 0px solid #ccc; position: relative;">
		<div style="background-color: #F3F8FE; width: 100%; height: 100px; margin: 5px auto; overflow: auto; border: 0px solid #ccc; position: relative;">

		</div>
		<div style="background-color: #F3F8FE; width: 200px; height: 500px; margin: 0px; overflow: auto; border: 0px solid #ccc; position: relative; float: left;">
			<div id="menus">
				
			</div>
		</div>
		<div style="background-color: #F3F8FE; width: 1100px; height: 500px; margin: 0px; overflow: auto; border: 0px solid #ccc; position: relative; float: right;">
			<div  id="tabs">
				<ul>
					<li><a href="#tabs-0">Welcome</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
				</ul>
				<div id="tabs-0" >
					<p>This is my private project!Improving!</p>
				</div>
			</div>
			
		</div>
	</div>
</body>
</html>
